<template>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,i) in lunbotu" :key="i">
          <!-- 属性可以使用中括号 -->
        <img :src="item[imgname]" alt=""  :class="[isfull?'img-full':'img-normal']">
      </mt-swipe-item>
    </mt-swipe>
</template>

<script>
export default {
    props:['lunbotu',"imgname","isfull"]    // isfull:宽高适应 谁调用这个轮播图组件就必须传递一个lunbotu的数组，同时只能接受img属性的图片作为轮播图展示出来
                                        // 首页期望图片是：宽高100%
                                            // + 商品详情页面期望图片是： 高度100%， 宽度自适应，图片居中显示；
}
</script>

<style lang="less" scoped>
// 轮播图初始状态下没有宽度和高度 需要自己找到类mint-swipe并加上高度   mint-swipe-item有三个 可以分别设置3个不同的内容
.mint-swipe {
  height: 180px;
  .mint-swipe-item {
    //   在父元素中，直接让子元素居中显示【图片：行内替换元素 】
      text-align: center;
        .img-full{
            // 如果给图片应用这个类，则图片的宽高都是撑满父元素
        width: 100%;
        height: 100%;
        overflow: hidden;
        }
        .img-normal{
            // 如果给图片应用这个类，则图片的高为100% 宽度自适应 横向的位置是居中显示
        height: 100%;
        }
    &:nth-child(1) {
      background-color: brown;
    }
    &:nth-child(2) {
      background-color: burlywood;
    }
    &:nth-child(3) {
      background-color: cadetblue;
    }
  }
}
</style>